html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

body{
    padding: 1em;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}


#expected_strength{
    width: 3em;
}

#passwd{
    ime-mode: disabled;
}

#show_password{
    display: inline-block;
    margin-left: 9em;
}

#actual_strength{
    border: 1px solid #aaa;
    font-size: 24px;
    display: inline-block;
    width: 9em;
    height: 0.5em;
    position: relative;
    background: #fff;
    
    &:before, &:after{
        content: '';
        width: 3em;
        height: 0.5em;
        display: block;
        position: absolute;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    &:before{
        left:0;
        background: #f00;
        border-right: 1px solid #aaa;
    }
    &:after{
        right: 0;
        border-left: 1px solid #aaa;
    }

    &.middle, &.middle:before{
        background: #ff0;
    }

    &.strong, &.strong:before, &.strong:after{
        background: #0f0;
    }
}


